<template>
    <span>
        <span v-for="(item) in fileList" :key="item.url+'11'">
            <AkImgPreview v-if="item.type == 'IMG'" :url="item.url"
             :imgHeight="imgHeight" :fileName="item.fileName"/>
             <AkAudioPreview  v-else-if="item.type=='AUDIO'"
              :imgHeight="imgHeight"  :url="item.url"  :fileName="item.fileName"/>
              <AkVideoPreview  v-else-if="item.type=='VIDEO'"
              :imgHeight="imgHeight"  :url="item.url"  :fileName="item.fileName"/>

               <AkTextPreview  v-else-if="item.type=='TEXT'"
              :imgHeight="imgHeight" :url="item.url"  :fileName="item.fileName"/>

                <AkCompressPreview  v-else-if="item.type=='COMPRESS'"
              :imgHeight="imgHeight" :url="item.url"  :fileName="item.fileName"/>

             <AkWordPreview  v-else-if="item.type=='WORD'"
              :imgHeight="imgHeight" :url="item.url"  :fileName="item.fileName"/>
              <AkExcelPreview  v-else-if="item.type=='EXCEL'"
              :imgHeight="imgHeight" :url="item.url"  :fileName="item.fileName"/>
               <AkPdfPreview  v-else-if="item.type=='PDF'"
              :imgHeight="imgHeight" :url="item.url"  :fileName="item.fileName"/>
              <AkUnknownPreview  v-else
             :imgHeight="imgHeight"  :url="item.url"  :fileName="item.fileName"/>
        </span>

    </span>
</template>
<script>
import AkUnknownPreview from './AkUnknownPreview'
import AkImgPreview from './AkImgPreview';
import AkAudioPreview from './AkAudioPreview';
import AkVideoPreview from './AkVideoPreview';
import AkTextPreview from './AkTextPreview';
import AkCompressPreview from './AkCompressPreview';
import AkWordPreview from './AkWordPreview';
import AkExcelPreview from './AkExcelPreview';
import AkPdfPreview from './AkPdfPreview';
export default {
    name:"AkFilePreview",
    describe:"文件预览",
    components:{AkUnknownPreview,AkTextPreview,AkCompressPreview,
        AkImgPreview, AkAudioPreview, AkVideoPreview,AkWordPreview,

        AkExcelPreview, AkPdfPreview},
    props:{
       value:{
           type:String,
           required:false,
           default: "",
       },
       imgHeight:{
           type: Number,
           required:false,
           default:50
       }
    },
    data(){
        return{
            fileList:[]
        }
    },
    methods:{
        handleDown(){
            this.$refs.AkFileDown.down();
        },

        initFileList(value){
            let val = value || this.value;
            if(!val || val.length == 0){
                this.fileList = [];
            }
            let data = [];

            let fileNameArray = val.split(",");
            fileNameArray.forEach(element => {
                if(element.length == 0){
                    return;
                }
                element = decodeURIComponent(element);
                let fileInfo = {};
                // 最后一个.的下标,如果没有返回0
                let index = 0;
                while(index<element.length && element.indexOf(".", index+1) > -1 ){
                    index =  element.indexOf(".", index+1) + 1;
                }
                // 文件后缀
                let fileSuffix = element.substr(index);
                fileInfo.fileSuffix = fileSuffix;
                index = 0;
                while(index<element.length && element.indexOf("/", index+1) > -1 ){
                    index = element.indexOf("/", index+1) + 1;
                }
                let fileName = element.substr(index);
                fileInfo.fileName = fileName;
                fileInfo.url = element;

                fileSuffix = fileSuffix.toUpperCase();

                if(fileSuffix == 'JPG' || fileSuffix == 'JPEG'
                  || fileSuffix == 'PNG' || fileSuffix == 'SVG'
                  || fileSuffix == 'ICO'){
                      fileInfo.type = 'IMG';
                      fileInfo.imgFlag = true;
                    //   fileInfo.previewFlag = true;
                }else if (fileSuffix == 'DOC' || fileSuffix == 'DOCX'){
                    fileInfo.type = 'WORD';
                    fileInfo.wordFlag = true;
                    fileInfo.previewFlag = true;
                }else if(fileSuffix == 'XLS' || fileSuffix == 'XLSX'){
                    fileInfo.type="EXCEL";
                    fileInfo.excelFlag = true;
                    fileInfo.previewFlag = true;
                }else if(fileSuffix == 'ZIP' || fileSuffix == 'RAR'){
                    fileInfo.type = 'COMPRESS';
                    fileInfo.compressFlag = true;
                }else if(fileSuffix == 'TXT'){
                    fileInfo.type = 'TEXT';
                    fileInfo.textFlag = true;
                    fileInfo.previewFlag = true;
                }else if(fileSuffix == "MP3"){
                    fileInfo.type = 'AUDIO';
                    fileInfo.audioFlag = true;
                    fileInfo.previewFlag = true;
                }else if(fileSuffix == 'MP4'){
                    fileInfo.type = 'VIDEO';
                    fileInfo.videoFlag = true;
                    fileInfo.previewFlag = true;
                }else if(fileSuffix == 'PDF'){
                    fileInfo.type = 'PDF';
                    fileInfo.pdfFlag = true;
                    fileInfo.previewFlag = true;
                }else{
                    fileInfo.type="";
                }

                data.push(fileInfo);
            });
            this.fileList = data;
        }
    },
    mounted(){
        this.initFileList();
    },
    watch:{
        value(newVal){
            this.initFileList(newVal);
        }
    }
}
</script>